<template>
    <!-- 显示标题 -->
    <el-text style="font-size: large;font-weight: bold;">我的消息</el-text>
    <!-- 当消息列表为空时显示el-empty组件 -->
    <el-empty v-show="isEmpty" style="width: 100%;height: 100%;" description="您还没有收到消息哦～" />
    <!-- 使用el-scrollbar组件创建一个可滚动的容器 -->
    <el-scrollbar height="100%" style="overflow-y: hidden;" v-show="!isEmpty">
        <!-- 使用el-space组件创建间距，根据size变量的值调整间距大小，当消息列表不为空时显示 -->
        <el-space wrap :size="size" fill style="width: 100%;margin-top: 1%;">
            <!-- 遍历消息列表，为每个消息创建一个el-card卡片 -->
            <div v-for="item in messages" :key="item.id">
                <el-card shadow="hover">
                    <!-- 使用el-row和el-col组件创建消息的布局 -->
                    <el-row justify="center" align="middle">
                        <el-col :span="14">
                            <el-row>
                                <!-- 显示消息的标题 -->
                                <el-col :span="24"><el-text style="font-size: large;font-weight: bold;">{{ item.title
                                        }}</el-text></el-col>
                                <!-- 显示消息的内容 -->
                                <el-col :span="24" style="margin-top: 2%;"><el-text>{{ item.content
                                        }}</el-text></el-col>
                            </el-row>
                        </el-col>
                        <!-- 显示消息的创建时间 -->
                        <el-col :span="6"><el-text>{{ item.create_time }}</el-text></el-col>
                        <!-- 显示一个按钮，用于标记消息为已读 -->
                        <el-col :span="4">
                            <el-button type="success" plain style="width: 100%;padding: 3%;"
                                @click="read(item.id!)">标记已读</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'; // 从vue引入onMounted生命周期钩子和ref函数  
import type { ComponentSize } from 'element-plus'; // 从element-plus库中引入ComponentSize类型，用于定义组件尺寸  
import { userInfoStore } from '../assets/userStore/userStore'; // 从本地路径引入userInfoStore，它是一个Vuex或Pinia的store，用于管理用户信息  
import { MessageModel } from '../assets/models/Message'; // 从本地路径引入MessageModel，定义消息的数据结构  
import { messageApis } from '../assets/apis/MessageApis'; // 从本地路径引入messageApis，包含与消息相关的API函数  

// 定义一个响应式变量，用于存储组件尺寸，初始值为'default'  
const size = ref<ComponentSize>('default');
// 从userInfoStore中获取用户信息  
const userStore = userInfoStore();
// 定义一个响应式变量，用于存储消息列表  
let messages = ref<Array<MessageModel>>([]);
// 定义一个响应式变量，用于标记消息列表是否为空  
let isEmpty = ref(true);

// 在组件挂载完成后执行，用于查询用户消息列表 
onMounted(() => {
    messageApis.queryMessageList(userStore.id)// 调用API函数查询消息列表，传入用户ID  
        .then((value: Array<MessageModel>) => {// 当API调用成功时，处理返回的消息列表
            messages.value = value;
            if (value.length != 0) {// 更新消息列表  
                isEmpty.value = false;// 更新标记，表示消息列表不为空 
            } else {
                isEmpty.value = true;// 更新标记，表示消息列表为空
            }
        })
})

const read = async (id: number) => {
    await messageApis.updateMessage(id, userStore.id);// 调用API函数更新消息状态，传入消息ID和用户ID  
    let value: Array<MessageModel> = await messageApis.queryMessageList(userStore.id);// 再次查询消息列表，以更新UI  
    messages.value = value;// 更新消息列表  
    if (value.length != 0) {
        isEmpty.value = false; // 更新标记，表示消息列表不为空  
    } else {
        isEmpty.value = true;// 更新标记，表示消息列表为空
    }
} // 注意：这里的返回类型应该调整，因为直接返回一个Promise数组可能不是预期的行为，应该直接处理Promise  

// 注意：read函数的返回类型应该调整，可能这里是一个错误或者误解，通常我们不希望一个函数返回Promise数组，而是直接处理异步逻辑 
</script>